<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
	div {width: 200px; height: 200px; background: red; filter: alpha(opacity:30); opacity:0.3;margin: 10px; float: left;}	
</style>
<script>
	window.onload = function()
	{
			var aDiv = document.getElementsByTagName('div');
		
			for(var i=0;i<aDiv.length;i++)
			{
					aDiv[i].timer =null;
					aDiv[i].alpha =30;
					aDiv[i].onmouseover = function()
					{
						startMove(this,100);
					}
					aDiv[i].onmouseout = function()
					{
						startMove(this,30);
					}
			}
	};
	//var alpha = 30;
	//var timer = null;
	function startMove(obj,iTarget)
	{
			//var alpha = 30;
		 //var oDiv = document.getElementById('div1');
		 clearInterval(obj.timer);
			
			obj.timer = setInterval(function(){
			var speed = (iTarget-obj.alpha)/6;
				/*   需要用到缓冲， 上节课的淡入淡出， 是匀速的
			if(obj.alpha<iTarget)
			{
				speed= 10;
			}else
			{
				speed=-10;
			}
			*/
				speed = speed>0?Math.ceil(speed):Math.floor(speed);
				
				console.log(speed + ',' + obj.alpha);
				
			if(obj.alpha==iTarget)
			{
				clearInterval(obj.timer);
			}
			else
			{
				obj.alpha+=speed;
				obj.style.filter = 'alpha(opacity:' + obj.alpha + ')';

				obj.style.opacity = obj.alpha/100;

			}
		}, 30);
	}
</script>
</head>

<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
